<template>
  <component is="a-modal" v-model:visible="visible" :width="800" :title="title" :mask-closable="false"
    :ok-loading="loading" @cancel="close" @before-ok="submit">
    <!-- 表单信息 start -->
    <a-form ref="formRef" :model="formData" :rules="rules" :auto-label-width="true">
      <a-form-item label="服务地区" field="area_id">
        <sa-select v-model="formData.area_id" :data="paramsData.area" :fieldNames="{value:'id',label:'name'}"></sa-select>
      </a-form-item>
      <a-form-item label="状态" field="state">
        <sa-radio v-model="formData.state" :data="ENUMS.STATE"></sa-radio>
      </a-form-item>
      <a-form-item label="代理姓名" field="true_name">
        <a-input v-model="formData.true_name" placeholder="请输入" allow-clear />
      </a-form-item>
      <a-form-item label="收货人名称" field="address_true_name">
        <a-input v-model="formData.address_true_name" placeholder="请输入" allow-clear />
      </a-form-item>
      <a-form-item label="联系电话" field="mobile">
        <a-input v-model="formData.mobile" placeholder="请输入" allow-clear />
      </a-form-item>
      <a-form-item label="邮箱" field="email">
        <a-input v-model="formData.email" placeholder="请输入" allow-clear />
      </a-form-item>
      <a-form-item label="收件地址" field="address">
        <a-input v-model="formData.address" placeholder="请输入" allow-clear />
      </a-form-item>
      <a-form-item label="连接仓库" field="room">
        <sa-checkbox v-model="formData.room" :data="paramsData.room" :fieldNames="{value:'id',label:'name'}"></sa-checkbox>
      </a-form-item>
      <a-form-item label="代理登录账户" field="login_account" v-if="mode=='add'">
        <a-input v-model="formData.login_account" placeholder="请输入" allow-clear />
      </a-form-item>
      <a-form-item label="代理登录密码" field="login_pwd" v-if="mode=='add'">
        <a-input-password v-model="formData.login_pwd" placeholder="请输入" allow-clear />
      </a-form-item>

    </a-form>
  </component>
</template>

<script setup>
import { ref, reactive, computed, watch } from "vue";
import { Message } from "@arco-design/web-vue";
import SaSelect from '@cps/sa-select/index.vue'
import SaCheckbox from '@cps/sa-checkbox/index.vue'
import SaRadio from '@cps/sa-radio/index.vue'
import AsApi from '@/api/system/afterSale'
import { throttle } from "lodash";
import tool from '@/utils/tool'
import ENUMS from '@/utils/enums'

const emit = defineEmits(["success"]);
// 引用定义
const formRef = ref();
const mode = ref("");
const visible = ref(false);
const loading = ref(false);
const spinLoading=ref(false)
let title = computed(() => {
  return  (mode.value == "add" ? "新增" : "编辑");
});
// 表单信息
const formData = reactive({
  id:'',
  room:[],
  login_pwd:'',
  login_account:'',
  address:'',
  email:'',
  mobile:'',
  address_true_name:'',
  true_name:'',
  state:1,
  area_id:'',
});

// 验证规则
const rules = ref({
  area_id: [{ required: true, message: "请选择" }],
  state: [{ required: true, message: "请选择" }],
  room: [{ required: true, message: "请选择" }],
  true_name: [{ required: true, message: "请输入" }],
  mobile: [{ required: true, message: "请选择" }],
  room: [{ required: true, message: "请选择" }],
  login_account: [{ required: true, message: "请输入" }],
  address_true_name: [{ required: true, message: "请输入" }],
  login_pwd: [{ required: true, message: "请输入" }],
  address: [{ required: true, message: "请输入" }],
});
// 打开弹框
const open = async (type = "add",data) => {
  visible.value = true;
  mode.value = type;
  formRef.value.resetFields();
  spinLoading.value=true
  if (type == "add") {
    
  }else{
    
    formData.id=data.id
  }
  getParams()
};
const paramsData=ref({})
const getParams = async () => {
    const {data}=await AsApi.add_aftersale_params()
    paramsData.value={...data}
}
// 设置数据
const setFormData = async (data) => {
  for (const key in formData) {
    if(key=='room'){
        formData[key] = data?.room_ids?.map(item => Number(item));
      }
    if (data[key] != null && data[key] != undefined) {
      formData[key] = data[key]
      
    }
  }
}
// 数据保存
const submit = throttle(async (done) => {

  const validate = await formRef.value?.validate();
  if (!validate) {
    loading.value = true;
    try {
      let data = { ...formData }
      let result = {};
      if (mode.value === "add") {
        // 添加数据
        data.id = undefined;
        result = await AsApi.add_aftersale(data);
      } else {
        // 修改数据
        result = await AsApi.update_aftersale(data);
      }
      if (result.code === 200) {
        Message.success("操作成功");
        emit("success");
        done(true);
      }
      // 防止连续点击提交
      setTimeout(() => {
        loading.value = false;
      }, 500);
    } catch {
      loading.value = false;
    }
  }
  done(false);
}, 100);

// 关闭弹窗
const close = () => (visible.value = false);
defineExpose({ open, setFormData });
</script>
<style scoped lang="less">
.flex_box{
  height: 100%;
  display: flex;
  align-items: center;
}
.add{
  color:#74c0fc;cursor: pointer;
}
.add:hover{
  color:#4263eb;cursor: pointer;
}
.mini{
  color:#ffa8a8;cursor: pointer;
}
.mini:hover{
  color:#f03e3e;cursor: pointer;
}
</style>
